<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/web-animations-js/web-animations-next-lite.min.html">
<link rel="import" href="/bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="/bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="/bower_components/paper-item/paper-item.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/paper-toast/paper-toast.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">

<dom-module id="plugin-wrapper">
    <template>

        <style>
            :host {
                display: block;
                padding: 10px;
                position: relative;
            }

            :host(:hover) {
                z-index: 1000;
            }

            #plugin-header {
                background: rgba(0, 0, 0, 0.06);
                padding: 0 5px 0 30px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
            }

            h3 {
                text-transform: uppercase;
            }

            #plugin-body {
                padding: 16px;
                margin-top: 65px;
                min-height: 150px;
                max-height: 400px;
                overflow: auto;
            }

            .center-fix {
                display: flex;
                align-items: center;
            }

            paper-item {
                cursor: pointer;
                --paper-item-selected-weight: normal;
            }

            .more {
                opacity: 0.5;
                transition: opacity 200ms;
            }

            :host(:hover) .more {
                opacity: 1;
            }

            .toast-button {
                color: white;
                font-weight: bold;
            }

            paper-toast {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                min-width: 0;
            }
        </style>

        <div id="plugin-header">
            <h3>[[getName()]]</h3>
            <paper-menu-button close-on-activate="true" vertical-align="top" horizontal-align="right">
                <paper-icon-button class="more" icon="more-vert" slot="dropdown-trigger" alt="menu"></paper-icon-button>
                <paper-listbox slot="dropdown-content">
                    <paper-item class="center-fix" on-click="reloadPlugin">Reload</paper-item>
                    <paper-item class="center-fix" on-click="showDocumentation">Documentation</paper-item>
                    <paper-item class="center-fix" on-click="showDelete">Delete</paper-item>
                </paper-listbox>
            </paper-menu-button>
        </div>
        <div id="plugin-body">
            <slot></slot>
        </div>

        <paper-toast id="toast">
            <paper-button class="toast-button" on-click="copy">Copy</paper-button>
        </paper-toast>

    </template>

    <script>
        class PluginWrapper extends Polymer.Element {
            static get is() { return 'plugin-wrapper'; }

            static get properties() {
                return {
                    name: {
                        type: String,
                        reflectToAttribute: true,
                    },
                }
            }

            getName() {
                if (!this.name) {
                    return '';
                }

                let name = this.name;
                name = name.replace('webdash-', '');
                name = name.replace(/\-/, ' ');
                return name;
            }

            reloadPlugin(){
                const html = this.innerHTML;
                this.innerHTML = '';
                requestAnimationFrame(() => {
                    this.innerHTML = html;
                });
            }

            showDocumentation() {
                window.open(`https://npmjs.com/${this.name}`);
            }

            showDelete(event) {
                this.deleteMessage = `npm uninstall ${this.name} --save-dev`;

                const toast = this.$.toast;
                toast.text = this.deleteMessage;
                toast.fitInto = this.$['plugin-body'];
                toast.open();
            }

            copy() {
                this.$.toast.hide();
                if (!this.deleteMessage) return false;

                let textarea = document.createElement('textarea');
                textarea.setAttribute('type', 'hidden');
                textarea.style.cssText = 'position:absolute;left:-500px;';
                textarea.textContent = this.deleteMessage.trim();
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                textarea.remove();
            }
        }

        window.customElements.define(PluginWrapper.is, PluginWrapper);
    </script>
</dom-module>
